import React, {Component} from 'react'

export default class Item extends Component {

  state = {
    mouse: false
  }

  //函数中返回函数成为高阶函数
  handleMouse = (flag) => {
    // console.log(flag);
    return () => {
      this.setState({mouse: flag})
    }
  }

  //勾选 取消勾选 回调
  handleCheck = (id) => {
    return (event) => {
      // console.log(id);
      // console.log(event.target.checked);

      this.props.updateTodo(id, event.target.checked);
    }
  }

  handleDelete = (id) => {
    // console.log(id);
    if (window.confirm('确定删除么？ ')) {
      this.props.deleteTodo(id);
    }
  }

  render() {

    const {id, name, done} = this.props;
    const {mouse} = this.state

    // 鼠标移入false  移出 true
    return <li style={{backgroundColor: mouse ? '#ddd' : '#FFF'}} onMouseLeave={this.handleMouse(false)}
               onMouseEnter={this.handleMouse(true)}>
      <input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
      <span className="float-right ">
          <button onClick={() => this.handleDelete(id)} className="button button-little bg-dot"
                  style={{display: mouse ? 'block' : 'none'}}>删除</button>
        </span>
      {name}
    </li>
  }
}